Build a Blog with Gatsby, Netlify and React:

module.exports = {
  plugins: [`gatsby-plugin-netlify-cms`],
}

  backend:
  name: test-repo
                
    media_folder: static/assets
    public_folder: assets
                
    collections:
     name: blog
     label: Blog
     folder: blog
     create: true
     fields:
        
    - { name: path, label: Path }
    - { name: date, label: Date, widget: datetime }
    - { name: title, label: Title }
    - { name: body, label: Body, widget: markdown }

  -git init
  -git add .
  -git commit -m "Add project to Git"
  -git remote add origin GitRepoLink
  -git push origin master

backend:
  name: github
  repo: your-username/your-repo-name
 
In my case, I used:
backend:
  name: github
  repo: BandariChetanKumar/gatsby-starter-netlify-cms

git add .
git commit -m "Add GitHub Backend"
git push origin master

remote: Enumerating objects: 6, done.
remote: Counting objects: 100% (6/6), done.
remote: Compressing objects: 100% (4/4), done.
remote: Total 4 (delta 1), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (4/4), done.
From https://github.com/BandariChetanKumar/gatsby-starter-netlify-cms
 * branch            master     -> FETCH_HEAD
   fa5a4b0..8558381  master     -> origin/master
Merge made by the 'recursive' strategy.
 blog/deploy-cloudflare-workers.md | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 blog/deploy-cloudflare-workers.md

import React from 'react'
import PropTypes from 'prop-types'
import { Link, graphql, StaticQuery } from 'gatsby'
 
class BlogRoll extends React.Component {
  render() {
    const { data } = this.props;
    const { edges: posts } = data.allMarkdownRemark;
 
    return (
      <div className="columns is-multiline">
        {posts &&
          posts.map(({ node: post }) => (
            <div className="is-parent column is-6" key={post.id}>
              <article
                className={`blog-list-item tile is-child box notification ${
                  post.frontmatter.featuredpost ? 'is-featured' : ''
                }`}
              >
                <header>
                  <p className="post-meta">
                    <Link
                      className="title has-text-primary is-size-4"
                      to={post.frontmatter.path}
                    >
                      {post.frontmatter.title}
                    </Link>
                    <span> &bull; </span>
                    <span className="subtitle is-size-5 is-block">
                      {post.frontmatter.date}
                    </span>
                  </p>
                </header>
                <p>
                  {post.excerpt}
                  <br />
                  <br />
                  <Link className="button" to={post.frontmatter.path}>
                    Keep Reading →
                  </Link>
                </p>
              </article>
            </div>
          ))}
      </div>
    )
  }
}
 
BlogRoll.propTypes = {
  data: PropTypes.shape({
    allMarkdownRemark: PropTypes.shape({
      edges: PropTypes.array,
    }),
  }),
};

export default () => (
  <StaticQuery
    query={graphql`
      query BlogRollQuery {
        allMarkdownRemark(
          sort: { order: DESC, fields: [frontmatter___date] }
        ) {
          edges {
            node {
              excerpt(pruneLength: 400)
              id
              frontmatter {
                path
                title
                date(formatString: "MMMM DD, YYYY")
              }
            }
          }
        }
      }
    `}
    render={(data, count) => <BlogRoll data={data} count={count} />}
  />
)

import React from 'react'
import BlogRoll from '../components/BlogRoll'
 
export default class BlogIndexPage extends React.Component {
  render() {
    return (
      <React.Fragment>
        <h1>Latest Posts</h1>
        <section>
          <div className="content">
            <BlogRoll />
          </div>
        </section>
      </React.Fragment>
    )
  }
}

import React from "react";

import Home from "../components/home";

export default function Index() {
return <Home />;
}

You’ll receive an error because your project doesn’t have Markdown support.

Generating development JavaScript bundle failed
 
/Users/mraible/blog/gatsby-netlify-okta/src/components/BlogRoll.js

  62:9  error  Cannot query field "allMarkdownRemark" on type "Query"  graphql/template-strings
 
✖ 1 problem (1 error, 0 warnings)
 
File: src/components/BlogRoll.js

module.exports = {
  plugins: [
    `gatsby-plugin-netlify-cms`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/blog`,
        name: `markdown-pages`,
      },
    },
    `gatsby-transformer-remark`
  ]
}

const path = require(`path`);

exports.createPages = async ({actions, graphql, reporter}) => {
 const {createPage} = actions;

 const blogPostTemplate = path.resolve(`src/templates/blog.js`);

 const result = await graphql(`
   {
     allMarkdownRemark(
       sort: { order: DESC, fields: [frontmatter___date] }
       limit: 1000
     ) {
       edges {
         node {
           frontmatter {
             path
           }
         }
       }
     }
   }
 `);

 // Handle errors
 if (result.errors) {
   reporter.panicOnBuild(`Error while running GraphQL query.`);
   return
 }

 result.data.allMarkdownRemark.edges.forEach(({node}) => {
   createPage({
     path: node.frontmatter.path,
     component: blogPostTemplate,
     context: {}, // additional data can be passed via context
   })
 })
};

import React from "react"
import { graphql } from "gatsby"
export default function Template({
 data, // this prop will be injected by the GraphQL query below.
}) {
 const { markdownRemark } = data // data.markdownRemark holds your post data
 const { frontmatter, html } = markdownRemark
 return (
   <div className="blog-post-container">
     <div className="blog-post">
       <h1>{frontmatter.title}</h1>
       <h2>{frontmatter.date}</h2>
       <div
         className="blog-post-content"
         dangerouslySetInnerHTML={{ __html: html }}
       />
     </div>
   </div>
 )
}
export const pageQuery = graphql`
 query($path: String!) {
   markdownRemark(frontmatter: { path: { eq: $path } }) {
     html
     frontmatter {
       date(formatString: "MMMM DD, YYYY")
       path
       title
     }
   }
 }
`

git add .
git commit -m "Add /blog and Markdown support"
git push origin master